<template>
  <div class="field-partial-date">
    <template v-if="birthmark">
      <el-popover placement="top" width="300" v-model="visible">
        <div>
          <!-- 年 -->
          <el-select
            :size="size"
            v-model="yearValue"
            placeholder="年"
            @visible-change="handleVisibleChange"
            :disabled="disabled || readOnly"
            clearable
            @clear="handleClearYear"
          >
            <el-option v-for="item in yearsList" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
          <!-- 月 -->
          <el-select
            :size="size"
            v-model="monthValue"
            placeholder="月"
            @visible-change="handleVisibleChange"
            :disabled="disabled || readOnly"
            clearable
            @clear="handleClearMonth"
          >
            <el-option v-for="item in monthList" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
          <!-- 日 -->
          <el-select
            v-if="!tableField.fieldVariableValue.accuracy || tableField.fieldVariableValue.accuracy === '1'"
            :size="size"
            v-model="dayValue"
            placeholder="日"
            @visible-change="handleVisibleChange"
            :disabled="disabled || readOnly"
            clearable
            @clear="handleClearDay"
          >
            <el-option v-for="item in dayListOptions" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </div>
        <el-button :size="size" slot="reference">{{ localValue }}</el-button>
      </el-popover>
    </template>

    <template v-else>
      <!-- 年 -->
      <el-select
        :size="size"
        v-model="yearValue"
        placeholder=""
        @visible-change="handleVisibleChange"
        :disabled="disabled || readOnly"
        clearable
        @clear="handleClearYear"
      >
        <el-option v-for="item in yearsList" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
      <!-- 月 -->
      <el-select
        :size="size"
        v-model="monthValue"
        placeholder=""
        @visible-change="handleVisibleChange"
        :disabled="disabled || readOnly"
        clearable
        @clear="handleClearMonth"
      >
        <el-option v-for="item in monthList" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
      <!-- 日 -->
      <el-select
        v-if="!tableField.fieldVariableValue.accuracy || tableField.fieldVariableValue.accuracy === '1'"
        :size="size"
        v-model="dayValue"
        placeholder=""
        @visible-change="handleVisibleChange"
        :disabled="disabled || readOnly"
        clearable
        @clear="handleClearDay"
      >
        <el-option v-for="item in dayListOptions" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
    </template>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es'
import Mixins from './mixins'
import { yearsList, monthList, dayList } from '@/utils/enums/ecrf-design.js'
export default {
  mixins: [Mixins],
  data() {
    return {
      visible: false,
      yearsList: [],
      monthList: [],
      dayListOptions: [],
      yearValue: '',
      monthValue: '',
      dayValue: '',
      size: 'mini',
      currentYear: '',
      currentMonth: '',
      currentDate: '',
    }
  },
  watch: {
    // 年值变化
    yearValue: {
      handler: function (val) {
        // 限制日的下拉项
        const dayCount = this.getDaysInMonth(this.yearValue, this.monthValue - 1)
        if (dayCount === 31) {
          this.dayListOptions = cloneDeep(dayList)
        }
        if (dayCount === 30) {
          this.dayListOptions = cloneDeep(dayList)
          this.dayListOptions.splice(1, 1)
        }
        if (dayCount === 29) {
          this.dayListOptions = cloneDeep(dayList)
          this.dayListOptions.splice(1, 2)
        }
        if (dayCount === 28) {
          this.dayListOptions = cloneDeep(dayList)
          this.dayListOptions.splice(1, 3)
        }
        // 控制月的下拉项，不超过现在时间
        if (this.yearValue == this.currentYear) {
          this.monthList = monthList.filter(item => item <= this.currentMonth)
          this.monthList.unshift('UK')
          if (this.monthValue > this.currentMonth) {
            this.monthValue = this.currentMonth
          }
        } else {
          this.monthList = monthList
        }
        // 控制日的下拉项，不超过现在时间
        if (this.yearValue == this.currentYear && this.monthValue == this.currentMonth) {
          this.dayListOptions = this.dayListOptions.filter(item => item <= this.currentDate)
          this.dayListOptions.unshift('UK')
          if (this.dayValue > this.currentDate) {
            this.dayValue = this.currentDate
          }
        }
        this.localValue = `${val}-${this.monthValue}-${this.dayValue}`
      },
    },
    // 月值变化
    monthValue: {
      handler: function (val) {
        // 限制日的下拉项
        const dayCount = this.getDaysInMonth(this.yearValue, this.monthValue - 1)
        if (dayCount === 31) {
          this.dayListOptions = cloneDeep(dayList)
        }
        if (dayCount === 30) {
          this.dayListOptions = cloneDeep(dayList)
          this.dayListOptions.splice(1, 1)
        }
        if (dayCount === 29) {
          this.dayListOptions = cloneDeep(dayList)
          this.dayListOptions.splice(1, 2)
        }
        if (dayCount === 28) {
          this.dayListOptions = cloneDeep(dayList)
          this.dayListOptions.splice(1, 3)
        }
        // 控制日的下拉项，不超过现在时间
        if (this.yearValue == this.currentYear && this.monthValue == this.currentMonth) {
          this.dayListOptions = this.dayListOptions.filter(item => item <= this.currentDate)
          this.dayListOptions.unshift('UK')
          if (this.dayValue > this.currentDate) {
            this.dayValue = this.currentDate
          }
        }
        this.localValue = `${this.yearValue}-${val}-${this.dayValue}`
      },
    },
    dayValue: {
      handler: function (val) {
        this.localValue = `${this.yearValue}-${this.monthValue}-${val}`
      },
    },
    localValue: {
      handler: function (val) {
        if (val && val.indexOf('-') >= 0) {
          const arr = val.split('-')
          this.yearValue = arr[0]
          this.monthValue = arr[1]
          this.dayValue = arr[2]
        } else {
          this.clearData()
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getCurrentTime()
    // 设置年选项不超过今年
    this.yearsList = yearsList.filter(item => item <= this.currentYear)
    // 设置月选项不超过今年
    if (this.yearValue == this.currentYear) {
      this.monthList = monthList.filter(item => item <= this.currentMonth)
      this.monthList.unshift('UK')
    } else {
      this.monthList = monthList
    }
    this.dayListOptions = cloneDeep(dayList)
    // 设置日选项不超过日年
    if (this.yearValue == this.currentYear && this.monthValue == this.currentMonth) {
      this.dayListOptions = this.dayListOptions.filter(item => item <= this.currentDate)
      this.dayListOptions.unshift('UK')
    }
  },
  methods: {
    // 获当前时间
    getCurrentTime() {
      // 创建一个新的 Date 对象，它将自动获取当前时间
      const currentDate = new Date()
      // 获取当前的年份
      this.currentYear = currentDate.getFullYear()
      // 获取当前的月份（注意月份是从 0 开始计数的，所以要加 1）
      this.currentMonth = currentDate.getMonth() + 1
      // 获取当前的日期
      this.currentDate = currentDate.getDate()
    },
    // 获取天数
    getDaysInMonth(year, month) {
      // 注意：月份是从0开始的，所以1月是0，2月是1，以此类推
      // 创建一个日期对象，设置为目标月份的下一个月的第一天
      var date = new Date(year, month + 1, 1)
      // 将日期向前调整一天，即得到目标月份的最后一天
      date.setDate(date.getDate() - 1)
      // 获取这一天的日期，即为该月份的天数
      return date.getDate()
    },
    handleClearDay() {
      this.dayValue = ''
    },
    handleClearYear() {
      this.yearValue = ''
    },
    handleClearMonth() {
      this.monthValue = ''
      this.dayValue = ''
    },
    clearData() {
      this.yearValue = ''
      this.monthValue = ''
      this.dayValue = ''
      this.localValue = ''
    },
    handleVisibleChange() {
      const now = new Date()
      if (!this.localValue) {
        this.yearValue = now.getFullYear()
        const nowMonth = now.getMonth() + 1
        this.monthValue = nowMonth < 10 ? `0${nowMonth}` : nowMonth
        const nowDay = now.getDate()
        this.dayValue = nowDay < 10 ? `0${nowDay}` : nowDay
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.field-partial-date {
  display: flex;
  overflow: hidden;

  .el-button {
    width: 100%;
    min-width: 6.25rem;
    height: 1.75rem;
  }

  .el-icon-brush {
    color: #c0c4cc;
  }
}

/deep/.el-select {
  margin-right: 5px;

  .el-input {
    width: 5rem !important;

    &:first-child {
      width: 5rem !important;
    }
  }
}
</style>
